<template>
	<view class="particulars">
		<view class="carousel">
			<view class="banner">

				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" :circular="true"
				 style="height: 375rpx;" @change="changePage">
					<swiper-item v-for="(items, index) in goodImag" :key="index">
						<image style="width: 100%;height: 375rpx;" :src="items" />
					</swiper-item>
				</swiper>
			</view>
			<view class="dots">{{ dots + 1 }}/{{ goodImag.length }}</view>
		</view>
		<view class="message">
			<view class="price" v-if="goodDetails.skus">
				￥{{price}}
				<text class="original">￥{{goodDetails.skus[0].marketPrice}}</text> 
			</view>
			<view class="name">{{goodDetails.goodsName}}</view>
		</view>
		<view class="cut-off"></view>
		<view class="specification">
			<view class="name">
				选择颜色/尺码
				<i class="cubeic-arrow right"></i>
			</view>
			
			<view class="ul"  v-if="shop_details[0]">
				<view class="flex">
					<view class="li" v-for="(item, index1) in shop_details[0].sublevel" :key="index1" :class="{ active:index1 == indexs}"
					 @click="checkeds(item, index1)">
						{{ item }}
					</view>
				</view>
				<view class="flex">
					<view class="li" v-for="(item, index) in shop_details[0].size" :key="index" :class="{ active: index == idx}"
					 @click="checkcolor(item, index)">
						{{ item }}
					</view>
				</view>
				
			</view>

		</view>
		<view class="cut-off"></view>
		<form @submit="formSubmit">

			<view class="from">
				<view class="qf">
					<view class="li">
						<text class="must">*</text>
						<text>货号</text>
						：
						<view class="text">
							{{goodsSn}}
						</view>
						<!-- <input type="text" value="" placeholder="请输入姓名" /> -->
					</view>
				 <view class="li">
					 <text class="must"></text>
				 	<text>代 理 商</text>
				 	：
				 	<!-- <input type="text" name="agentName" v-model=""   v-if="agentName"/> -->
				 	<view @click="open()" class='noagent' :class="agentName?'':'color999' ">{{agentName?agentName:'选择代理商'}}</view>		<view  class="arrowright">
							<image src="/static/img/rightarrow.png" mode="" ></image>
						</view>
				 </view>
					<view class="li">
						<text class="must">*</text>
						<text>联系方式</text>
						：
						<input type="number" maxlength="11" name="link" value="" placeholder="请输入联系方式"  @input="search"/>
						<view  class="arrowright">
							<image src="/static/img/rightarrow.png" mode="" ></image>
						</view>
					</view>
					<view class="li">
						<text class="must">*</text>
						<text>收货人姓名</text>
						：
						<input type="text" name="names" value="" v-model="receivename" placeholder="请输入收货人姓名" />
					</view>
					<view class="li">
						<text class="must">*</text>
						<text>所在城市</text>
						：
						<view class="" @tap="toggleTab('linkage')">
							<view v-if="resultInfo.result" class="flex" style="width: 502rpx;">
								<text>{{resultInfo.result}}</text>
								<image src="/static/img/arrowdown.png" mode="" class="arrowdown"></image>
							</view>
							<view v-else class="flex" style="color: #999;width: 502rpx;">请选择地址 <image src="/static/img/arrowdown.png" mode="" class="arrowdown"></image>
							</view>
						</view>


					</view>
					<view class="li">
						<text class="must">*</text>
						<text>详细地址</text>
						：
						<input type="text" name="detailarrdess" v-model="receiveaddress" value="" placeholder="请输入详细地址" />
					</view>

					<view class="li" v-if="array">
						<text class="must">*</text>
						<text>快递</text>
						：
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{ array[index] }}</view>
						</picker>
						<image src="/static/img/arrowdown.png" mode="" class="uni-arrowdown" ></image>
						
					</view>
					<view class="li">
						<text class="must"></text>
						<text>身高</text>
						：
						<input type="number" name="height" v-model="receiveheight" value="" placeholder="请输入身高(CM)" />
					</view>
					<view class="li">
						<text class="must"></text>
						<text>体重</text>
						：
						<input type="number" name="weight" value="" v-model="receiveweight" placeholder="请输入体重(KG)" />
					</view>
					<view class="li">
						<text class="must"></text>
						<text>备注</text>
						：
						<textarea type="text" name="mark" value="" v-model="receivebeizhu"  placeholder="请输入备注" class="textarea" />
						</view>
				</view>
				<button form-type="submit" class="button">保 存</button>
			</view>
		</form>
	
		<!-- <uni-popup ref="popup" type="center">
			<view class="structure">
				<view class="ul">
					<view class="li" v-for="(item, index) in agentlist" :key="index">
						<view class="msg" >
							<image src="/static/img/bottom.png" @click.stop="openExpand(item)" :class="{ avtive:item.isExpand}" v-if="item.children"/>
							<text class="name"  :class="current === item.id ? 'current' : ''" @click="choose(item)">{{item.name}}</text>
						</view>
						<view class="sublevel" v-if="item.children.length>0 && item.isExpand">
							<view class="list" v-for="(item1, index1) in item.children" :key="index1">
								<view class="msg" >
									<image src="/static/img/bottom.png" @click.stop="openExpand(item1)" :class="{ avtive:item1.isExpand}" v-if="item1.children"/>
									<text class="name" :class="current === item1.id ? 'current' : ''" @click="choose(item1)">{{item1.name}}</text>
								</view>
								<view class="sublevel" v-if="item1.children.length>0 && item1.isExpand">
									<view class="list" v-for="(item2, index2) in item1.children" :key="index2">
										<view class="msg" >										
											<image src="/static/img/bottom.png" @click.stop="openExpand(item2)" :class="{ avtive:item2.isExpand}" v-if="item2.children"/><text class="name" :class="current === item2.id ? 'current' : ''" @click="choose(item2)">{{item2.name}}</text>
										</view>
										<view class="sublevel" v-if="item2.children.length>0 && item2.isExpand">
											<view class="list" v-for="(item3, index3) in item2.children" :key="index3">
												<view class="msg" >										
													<text class="name" :class="current === item3.id ? 'current' : ''" @click="choose(item3)">{{item3.name}}</text>
												</view>
											</view>
											
										</view>
									</view>
									
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="choice" @click="close">确认选择</view>
			</view>
		</uni-popup> -->
		<w-picker
			mode="linkage"
			:level="3"
			@confirm="onConfirm"
			ref="linkage"
			:linkList="linkList"
			themeColor="#bd3c8c"
		></w-picker>
	</view>
</template>
<script>
import { uniNavBar, uniIcons, uniPopup } from '@dcloudio/uni-ui';

import wPicker from "@/components/w-picker/w-picker.vue";
import particulars from '../../../servers/agent/placeorder/particulars.js';
export default {
	components: { wPicker,uniNavBar, uniIcons, uniPopup },
	data() {	
		return {
			id: '', //商品id			
			goodDetails: '',
			agentName:'',
			agentId:'',
			array: [],
			agentlist:[],
			color:'',
			size:'',
			resultInfo:{
				result:""
			},
			regionDval:[],
			goodImag: [],
			dots: 0,
			city:'',
			province:'',
			area:'',
			citycode:'',
			provincecode:'',
			areacode:'',
			checked:'',
			checked1:'',
			index: 4,
			idx:0,
			indexs:0,
			shop_details: [],
			goodsSn:'',
			productSkuDesp:'',
			itemId:'',
			expressName:'',
			receivename:'',
			receiveaddress:'',
			receiveheight:'',
			receiveweight:'',
			receivebeizhu:'',
			actId:null,
			addrId:'',
			price:'',
			linkList:[]
		};
	},

	mounted() {
		this.actId = this.commonality.route_get('actId', this.$route);
		this.id = this.commonality.route_get('shopId', this.$route);
		// if(this.id){
			this.getdetail();
			this.getDict();
			this.getAddr()
		// }
		console.log(this.actId)
	},
	// onLoad(option) {
	// 	if(option.item){
	// 		var obj=JSON.parse(option.item)
	// 		this.agentName=obj.name;
	// 		this.agentId=obj.id

	// 	}
	// },
	onShow() {
		var _this=this;
		uni.$once('checkedAddress', function(data) {
			_this.receivename=data.contactUser
			_this.resultInfo.result=`${data.province} ${data.city} ${data.region}`;
			_this.city=data.city
			_this.citycode=data.cityCode;
			_this.province=data.province;
			_this.provincecode=data.provinceCode;
			 _this.area=data.area;
			 _this.areacode=data.regionCode
			 _this.addrId=data.id;
			_this.receiveaddress=data.addrDetail;
			_this.receiveheight=data.height;
			_this.receiveweight=data.weight;
			console.log(data)
			// _this.address = data;
		});
		uni.$once('checked',function(data){
			var obj=JSON.parse(data)
			_this.agentName=obj.name;
			_this.agentId=obj.id
		})
	},
	methods: {
		//根据手机号查找代理商信息 
		search(e){
			if(e.target.value.length==11){
				if(!(/^1[3456789]\d{9}$/.test(e.target.value))){
					uni.showToast({
						title:'请填写正确的手机号~',
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:'./address?phone='+e.target.value
				})
				
				
				
			}
			
			
		},
		toggleTab(str){
			this.$refs[str].show();
		},
		onConfirm(val){
			console.log(val);
			this.province=val.checkArr[0]
			this.city=val.checkArr[1];			
			this.area=val.checkArr[2];
			this.provincecode=val.checkValue[0]
			this.citycode=val.checkValue[1];			
			this.areacode=val.checkValue[2];
			this.resultInfo={...val};
		},
		// 详情
		getdetail(){
			uni.showLoading({
				title:'数据加载中'
			})
			console.log(this.actId,this.id,this.actId!=undefined);
			if(this.actId!='undefined'){
				var da = {
					id: this.id,
					actId:this.actId
				}
				particulars.actqueryDetails(da).then(res => {
					if(res.data){
						uni.hideLoading();
						this.goodDetails=res.data;
						this.goodImag = this.goodDetails.imgs.map(v => {
						 				v = this.imgCDNUrl + v;
						 				return v;
						});
						this.goodsSn=res.data.goodsSn
						this.screen();
					}
						 // console.log(this.goodDetails)	
						// this.color=this.goodDetails.productSkuDesp.split(',')[0].split(':')[1]
						//  this.size=this.goodDetails.productSkuDesp.split(',')[1].split(':')[1]	
					})
			}else{
				
			particulars.queryDetails(this.id).then(res => {
				if(res.data){
					uni.hideLoading();
					this.goodDetails=res.data;
					this.goodImag = this.goodDetails.imgs.map(v => {
					 				v = this.imgCDNUrl + v;
					 				return v;
					});
					this.goodsSn=res.data.goodsSn
					this.screen();
				}
					 // console.log(this.goodDetails)	
					// this.color=this.goodDetails.productSkuDesp.split(',')[0].split(':')[1]
					//  this.size=this.goodDetails.productSkuDesp.split(',')[1].split(':')[1]	
				})
				}
		},
		// 快递列表
		getDict(){
			var params={
				dictGroup:'快递公司',
				dictGroupCode:'expressCompany',
				isEnable:1
			}
			particulars.queryDict(params).then(res => {
			 for(var i=0;i<res.data.records.length;i++){
				 this.array.push(res.data.records[i].dictValueDesp)
			 }	
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
		},
		// 地址
		getAddr(){
			particulars.cityArea().then(res => {
				this.linkList=res.data;
				})
				.catch(err => {
					
					console.log(new Error('请检查网络后重试'));
				});
		},
		
		
		open(){
			uni.navigateTo({
				url:'./tree?type=1'
			})
		},
	
	
		// 修改颜色尺寸格式
		screen() {
			var classify = [];
			var it1 = [],it2=[];
			var da1 = this.goodDetails.skus;
			var da10 = [];
			for (var i = 0; i < da1.length; i++) {
				var da2 = da1[i].productSkuDesp;
				var da3 = da2.split(',');
				  // console.log(da3)
				  // var color=da3[0].split(':')[1]
				  
				  it1.push(da3[0].split(':')[1])
					it2.push(da3[1].split(':')[1])
					
				   for (var j = 0;j < it1.length;j++) {
				          if (da10.indexOf(it1[j]) === -1) {
				              da10.push(it1[j])
				          }
				      }
					  for (var k = 0;k < it2.length;k++) {
					         if (classify.indexOf(it2[k]) === -1) {
					             classify.push(it2[k])
					         }
					     }
				  
				
			}
			
		
			this.shop_details.push({
				size: classify,
				sublevel: da10
			});
			this.checked1 = this.shop_details[0].size[0]
			this.checked = this.shop_details[0].sublevel[0]
			this.price=this.goodDetails.skus[0].discountPrice
			this.indexs = 0
			this.idx = 0
			
			
		},
		// 选择尺寸
		checkeds(e, ind) {
			this.indexs=ind
			// this.$set(this.checked, ind, e);
			this.checked=e
			
			
			var skus = this.goodDetails.skus
			// var checked = this.checked
			// var shop_details = this.shop_details
			// var productSkuDesp = ''
			
			// for(var i=0;i<checked.length;i++){
			// 	if(productSkuDesp){
			// 		productSkuDesp+=','
			// 	}
			// 	productSkuDesp += shop_details[i].name + ':' + checked[i]
			// }
			// this.productSkuDesp=productSkuDesp;
			
			for(var j=0;j<skus.length;j++){
				// console.log(skus[j].productSkuDesp.split(',')[1].split(':')[1])
				var size=skus[j].productSkuDesp.split(',')[1].split(':')[1]
				var color=skus[j].productSkuDesp.split(',')[0].split(':')[1]
				if(e==color&&this.checked1==size){
					 this.productSkuDesp=skus[j].productSkuDesp;
					this.itemId=skus[j].id;
					this.price=skus[j].discountPrice
				}
				console.log(this.checked1,e,size,color)
				// if(skus[j].productSkuDesp==productSkuDesp){
				// 	this.productSn=skus[j].productSn;
				// 	this.itemId=skus[j].id;
				// }
			}
		},
		// 选择颜色
		checkcolor(e, ind) {
			this.idx=ind
			console.log(this.idx)
			this.checked1=e
	
			var skus = this.goodDetails.skus
			var checked = this.checked
			for(var j=0;j<skus.length;j++){
				
				var size=skus[j].productSkuDesp.split(',')[1].split(':')[1]
				var color=skus[j].productSkuDesp.split(',')[0].split(':')[1]
				if(e==size&&this.checked==color){
					 this.productSkuDesp=skus[j].productSkuDesp;
					this.itemId=skus[j].id;
					this.price=skus[j].discountPrice
				}
				
			}
		},
		// 保存
		formSubmit(e){
			if(this.actId=='undefined'){
				this.actId=null
			}
			var params={
				actId: this.actId,			
				id: null,
				expressName:this.expressName?this.expressName:this.array[4],
				remark:e.detail.value.mark,
				goodsId:this.id,
				agentId:this.agentId,
				height:e.detail.value.height,
				itemId:this.itemId?this.itemId:this.goodDetails.skus[0].id,
				productSkuDesp:this.productSkuDesp?this.productSkuDesp:this.goodDetails.skus[0].productSkuDesp,
				shipAddr:{
					addrId:this.addrId,
					addrDetail:e.detail.value.detailarrdess,
					city:this.city,
					cityCode:this.citycode,
					contactPhone:e.detail.value.link,
					contactUser:e.detail.value.names,
					province:this.province,
					provinceCode:this.provincecode,
					region:this.area,
					regionCode:this.areacode,
					"town": null,
					 "townCode": null,
					 weight:e.detail.value.weight,
					 height:e.detail.value.height
				},
				weight:e.detail.value.weight
			}
			
			if(e.detail.value.detailarrdess===''||this.city===''||e.detail.value.link===''||e.detail.value.names===''||this.province===''||this.area===''){
				console.log(e.detail.value.detailarrdess,this.city,e.detail.value.link,e.detail.value.names,this.province,this.area)
				uni.showToast({
					title:'您有未填的信息哦~',
					icon:'none'
				})
			}else{
				uni.showLoading({
					title:'数据加载中'
				})
				particulars.place(params).then(res => {
					if(res.code==200){
						uni.hideLoading();
							uni.showToast({
								title:'保存成功',
								success() {
									uni.redirectTo({
										url:'../order/order'
									})
								}
							})
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						
					}
					
						
						 console.log(res.data)	
						
							
					})
					.catch(err => {
						
						console.log(new Error('请检查网络后重试'));
					});
			}
		},

		changePage(current) {
			this.dots = current.detail.current;
			
		},
		bindPickerChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			this.expressName=this.array[e.target.value]
		},
		
		
		
	}
};
</script>

<style lang="less" scoped>
	.current{
		color: #bd3c8c;
	}
	.noagent{
		font-size: 13px;
		    width: 278px;
		    height: 43px;
		    line-height: 43px;
		    border: 1px solid #e1e1e1;
		    -webkit-border-radius: 5px;
		    border-radius: 5px;
		    padding: 0 10px;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    margin: 7px 0;
			
	}
	.color999{
		color: #999;
	}
.arrowdown,.uni-arrowdown{
	width: 29rpx;
	height: 16rpx;
}	
.arrowright{
	position: absolute;
	right: 0;
	top: 6rpx;
	width: 30px;
	text-align: center;
	pointer-events: none;
	image{
		width: 18rpx;
		height: 34rpx;
	}
}
.particulars {
	height: 100%;
	overflow-y: auto;
	background: #fff;
	padding-bottom: 100rpx;
	box-sizing: border-box;
	.carousel {
		position: relative;
		image {
			display: block;
			min-height: 300rpx;
		}
		.dots {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			width: 91rpx;
			height: 46rpx;
			line-height: 46rpx;
			background: #999;
			color: #fff;
			border-radius: 22rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}
	.activity {
		background: #fe3a3a;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 64rpx;
		image {
			position: relative;
			width: 28rpx;
			height: 30rpx;
			top: 5rpx;
		}
	}
	.message {
		padding: 0 20rpx;
		.price {
			line-height: 120rpx;
			font-size: 44rpx;
			color: #bd3c8c;
			.original {
				font-size: 40rpx;
				text-decoration: line-through;
				color: #999;
				margin-left: 20rpx;
			}
			.discount {
				position: relative;
				font-size: 28rpx;
				background: #f89bd9;
				padding: 0 10rpx 0 20rpx;
				color: #fff;
				margin-left: 50rpx;
				line-height: 36rpx;
			}
			.discount:before {
				position: absolute;
				content: '';
				top: 0;
				right: 100%;
				border-width: 20rpx;
				border-style: solid;
				border-color: transparent #f89bd9 transparent transparent;
			}
			.discount:after {
				position: absolute;
				content: '';
				display: block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #fff;
				top: 50%;
				left: 0;
				transform: translate(-20%, -50%);
			}
		}
		.name {
			font-size: 34rpx;
			line-height: 48rpx;
			color: #000;
			margin-bottom: 57rpx;
		}
	}
	.specification {
		padding: 14rpx 20rpx;
		.name {
			font-size: 30rpx;
			line-height: 69rpx;
			color: #999;
		}
		.ul {
			overflow: hidden;
			.flex{
				display: flex;
			}
			.li {
				
				padding: 14rpx 20rpx;
				background: #f4f4f4;
				color: #999999;
				border-radius: 10rpx;
				margin: 0 22rpx 30rpx 0;
				position: relative;
				
			}
			.li.active{			
					background-color: #fbeef6;
					color: #bd3c8c;
					
				
			}
		}
	}
	.from {
		.qf {
			padding: 0 20rpx;
			.li {
				position: relative;
				display: flex;
				flex-direction: row;
				line-height: 120rpx;
				.must {
					width: 20rpx;
					color: #f70225;
					margin-right: 10rpx;
				}
				.padding5{
					padding-right: 16rpx;
				}
				.flex{
					display: flex;
					justify-content: space-between;
					align-items: center;
					text{
						width: auto;
						// color: #999;
					}
				}
				text {
					font-size: 28rpx;
					width: 160rpx;
					text-align-last: justify;
				}
				input,
				picker,
				.textarea,.flex {
					font-size: 26rpx;
					width: 557rpx;
					height: 90rpx;
					line-height: 90rpx;
					border: 1px solid #e1e1e1;
					border-radius: 10rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin: 15rpx 0;
					background: #ffffff;
					.uni-placeholder {
						color: #999999;
					}
				}
				.textarea {
					padding: 20rpx;
					height: 253rpx;
					line-height: 50rpx;
				}
				.text{
					font-size: 26rpx;
				}
				.uni-arrowdown {
					position: absolute;
					right: 20rpx;
					top: 56rpx;
					text-align: center;
					pointer-events: none;
				}
			}
		}
		.button {
			height: 90rpx;
			line-height: 90rpx;
			margin: 30rpx 20rpx;
			text-align: center;
			color: #ffffff;
			border-radius: 50px;
			font-size: 32rpx;
			background: linear-gradient(90deg, #d2158a, #fc6395);
		}
	}
}

</style>
